<%--suppress JSJQueryEfficiency --%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css"
          href="../../../js/jquery-easyui-1.9.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="../../../js/jquery-easyui-1.9.5/themes/icon.css">
    <link rel="stylesheet" type="text/css"
          href="../../../js/jquery-easyui-1.9.5/themes/color.css">
    <script type="text/javascript"
            src="../../../js/jquery-easyui-1.9.5/jquery.min.js"></script>
    <script type="text/javascript"
            src="../../../js/jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
</head>
<body>
<table id="computerUse_dg" title="电脑使用信息" class="easyui-datagrid" style="width:100%;height:100%"
       url="../computerUse/list"
       toolbar="#computerUse_toolbar"
       rownumbers="true" pagination="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="clistNo" style="width: 16%">电脑使用编号</th>
        <th field="computerMessage" formatter="computerMessageFormatter" style="width: 16%">电脑编号</th>
        <th field="readerMessage" formatter="readerMessageFormatter" style="width: 16%">读者编号</th>
        <th field="openDate" style="width: 16%">开机时间</th>
        <th field="closeDate" style="width: 16%">关机时间</th>
        <th field="areaMessage" formatter="areaMessageFormatter" style="width: 16%">所属区域</th>
    </tr>
    </thead>
</table>

<div id="computerUse_toolbar">
    <label for="searchComputerMessageComputerUse">电脑编号:</label>
    <input id="searchComputerMessageComputerUse" name="computerMessage.computerNo"
           class="easyui-combobox" data-options="valueField:'computerNo',
           textField:'computerName',url:'../computerUse/computerMessageList'">

    <label for="searchReaderMessageComputerUse">读者编号:</label>
    <input id="searchReaderMessageComputerUse" name="readerMessage.readerNo"
           class="easyui-combobox" data-options="valueField:'readerNo',
           textField:'name',url:'../computerUse/readerMessageList'">

    <label for="searchAreaMessageComputerUse">所属区域:</label>
    <input id="searchAreaMessageComputerUse" name="areaMessage.areaNo"
           class="easyui-combobox" data-options="valueField:'areaNo',
           textField:'areaName',url:'../computerUse/areaMessageList'">

    <a id="searchButton" href="javascript:doComputerUseSearch();"
       class="easyui-linkbutton" data-options="iconCls:'icon-search'">Search</a>
    <a id="resetButton" href="javascript:doComputerUseReset();"
       class="easyui-linkbutton" data-options="iconCls:'icon-redo'">Reset</a>
    <br/>
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
       onclick="newComputerUse()">New ComputerUse</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
       onclick="editComputerUse()">Edit ComputerUse</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
       onclick="destroyComputerUse()">Remove ComputerUse</a>
</div>

<%--        新增和修改对话框--%>
<div id="computerUse_dlg" class="easyui-dialog" style="width:400px;height:300px;padding:10px 20px"
     closed="true" buttons="#computerUse_dlg-buttons">
    <div class="ftitle" style="text-align: center">ComputerUse</div>
    <br>
    <form id="computerUse_fm" method="post">
        <div class="fitem">
            <label for="computerMessage">电脑编号&emsp;</label>
            <input id="computerMessage" name="computerMessage.computerNo" class="easyui-combobox"
                   prompt="computerMessage"
                   data-options="required:true,missingMessage:'computerMessage is not null',
                   valueField:'computerNo',textField:'computerName',url:'../computerUse/computerMessageList'"
                   style="width: 250px">
        </div>
        <br>
        <div class="fitem">
            <label for="readerMessage">读者编号&emsp;</label>
            <input id="readerMessage" name="readerMessage.readerNo" class="easyui-combobox"
                   prompt="readerMessage"
                   data-options="required:true,missingMessage:'readerMessage is not null',
                   valueField:'readerNo',textField:'name',url:'../computerUse/readerMessageList'"
                   style="width: 250px">
        </div>
        <br>
        <div class="fitem">
            <label for="openDate">开机时间&emsp;</label>
            <input id="openDate" name="openDate" class="easyui-datetimebox"
                   data-options="required:true,missingMessage:'openDate is not null',
                   showSeconds:true,formatter:formatter,parser:parser" style="width: 250px">
        </div>
        <br>
        <div class="fitem">
            <label for="closeDate">关机时间&emsp;</label>
            <input id="closeDate" name="closeDate" class="easyui-datetimebox"
                   data-options="required:true,missingMessage:'closeDate is not null',
                   showSeconds:true,formatter:formatter,parser:parser" style="width: 250px">
        </div>
        <br>
        <div class="fitem">
            <label for="areaMessage">所属区域&emsp;</label>
            <input id="areaMessage" name="areaMessage.areaNo" class="easyui-combobox"
                   prompt="areaMessage"
                   data-options="required:true,missingMessage:'areaMessage is not null',
                   valueField:'areaNo',textField:'areaName',url:'../computerUse/areaMessageList'"
                   style="width: 250px">
        </div>
    </form>
</div>
<div id="computerUse_dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok"
       onclick="saveComputerUse()">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="$('#computerUse_dlg').dialog('close')">Cancel</a>
</div>

<script type="text/javascript">
    //框架进阶：1.能使用框架，2.能扩展框架，3.能修改框架，4.能设计框架
    //修改easyUI组件的时间格式-时间格式化器-把时间对象转换为字符串
    function formatter(date) {
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours().toString();
        let minutes = date.getMinutes().toString();
        let seconds = date.getSeconds().toString();
        month = month < 10 ? '0' + month : month;
        day = day < 10 ? '0' + day : day;
        hour = hour < 10 ? '0' + hour : hour;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;
        return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
    }

    //时间解析器：把字符串转换为javascript的时间对象
    function parser(s) {
        let t = Date.parse(s);
        if (!isNaN(t)) {
            return new Date(t);
        } else {
            return new Date(s + ":00:00");
        }
    }

    function computerMessageFormatter(value) {
        return value.computerName;
    }

    function readerMessageFormatter(value) {
        return value.name;
    }

    function areaMessageFormatter(value) {
        return value.areaName;
    }

    function doComputerUseSearch() {
        //调用datagrid对象的load方法查询数据，并传递查询参数
        $("#computerUse_dg").datagrid("load", {
            "computerMessage.computerNo": $("#searchComputerMessageComputerUse").val(),
            "readerMessage.readerNo": $("#searchReaderMessageComputerUse").val(),
            "areaMessage.areaNo": $("#searchAreaMessageComputerUse").val()
        });
    }

    function doComputerUseReset() {
        $("#searchComputerMessageComputerUse").combobox('clear');
        $("#searchReaderMessageComputerUse").combobox('clear');
        $("#searchAreaMessageComputerUse").combobox('clear');
        //清空查询参数后，重新加载数据
        $("#computerUse_dg").datagrid("load", {});
    }

    function loadComputerMessageSuccess(value) {
        $('#computerMessage').combobox({
            onLoadSuccess: function (data) {
                if (data) {
                    if (value) {
                        $('#computerMessage').combobox('select', value);
                    } else {
                        $('#computerMessage').combobox('select', data[0].computerNo);
                    }
                }
            }
        });
    }

    function loadReaderMessageSuccess(value) {
        $('#readerMessage').combobox({
            onLoadSuccess: function (data) {
                if (data) {
                    if (value) {
                        $('#readerMessage').combobox('select', value);
                    } else {
                        $('#readerMessage').combobox('select', data[0].readerNo);
                    }
                }
            }
        });
    }

    function loadAreaMessageSuccess(value) {
        $('#areaMessage').combobox({
            onLoadSuccess: function (data) {
                if (data) {
                    if (value) {
                        $('#areaMessage').combobox('select', value);
                    } else {
                        $('#areaMessage').combobox('select', data[0].areaNo);
                    }
                }
            }
        });
    }

    function newComputerUse() {
        $('#computerUse_dlg').dialog('open').dialog('setTitle', 'New ComputerUse');
        $('#computerUse_fm').form('clear');
        url = '../computerUse/add';
        const d = new Date();
        const nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() +
            " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
        const newDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() +
            " " + d.getHours() + ":" + d.getMinutes() + ":" + (d.getSeconds() + 1);
        $('#openDate').datetimebox('setValue', nowDate);
        $('#closeDate').datetimebox('setValue', newDate);
        loadComputerMessageSuccess();
        loadReaderMessageSuccess();
        loadAreaMessageSuccess();
    }

    function editComputerUse() {
        $('#computerUse_fm').form('clear');
        var row = $('#computerUse_dg').datagrid('getSelected');
        if (row) {
            $('#computerUse_dlg').dialog('open').dialog('setTitle', 'Edit ComputerUse');
            $('#computerUse_fm').form('load', row);
            url = '../computerUse/edit?clistNo=' + row.clistNo;
            loadComputerMessageSuccess(row.computerMessage.computerNo);
            loadReaderMessageSuccess(row.readerMessage.readerNo);
            loadAreaMessageSuccess(row.areaMessage.areaNo);
        } else {
            $.messager.show({
                title: 'Error',
                msg: "请选择要修改的用户信息"
            });
        }
    }

    function destroyComputerUse() {
        var row = $('#computerUse_dg').datagrid('getSelected');
        if (row) {
            $.messager.confirm('Confirm', '是否需要删除该信息？', function (r) {
                if (r) {
                    $.post('../computerUse/delete', {clistNo: row.clistNo}, function (result) {
                        if (result.success) {
                            $('#computerUse_dg').datagrid('reload');
                        } else {
                            $.messager.show({
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    }, 'json');
                }
            });
        } else {
            $.messager.show({
                title: 'Error',
                msg: "请选择要删除的用户信息"
            });
        }
    }

    function saveComputerUse() {
        $('#computerUse_fm').form('submit', {
            url: url,
            onSubmit: function () {
                // 提交表单前 表单验证
                return $(this).form('validate');
            },
            success: function (result) {
                // 收到服务器响应的json字符串后，调用这里的代码，回调函数当浏览器收到服务器返回的数据后才执行
                var result = eval('(' + result + ')');
                if (!result.success) {
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#computerUse_dlg').dialog('close');		// 新增成功，关闭对话框
                    $('#computerUse_dg').datagrid('reload');	// 新增成功，刷新列表数据
                }
            }
        });
    }
</script>
</body>
</html>
